<template>
  <view :class="['loading-inline', { 'flex': wrap }]" :style="{ 'color': color }">
    <view class="loading-inline__icon" :style="{ 'transform': `scale(${size})` }">
      <view class="loading-inline__icon-item" :style="{ 'background': color }"></view>
      <view class="loading-inline__icon-item" :style="{ 'background': color }"></view>
      <view class="loading-inline__icon-item" :style="{ 'background': color }"></view>
      <view class="loading-inline__icon-item" :style="{ 'background': color }"></view>
      <view class="loading-inline__icon-item" :style="{ 'background': color }"></view>
    </view>
    <view
      v-if="text"
      class="loading-inline__text"
      :style="{ 'margin-top': wrap ? '20rpx' : '0rpx' }"
    >{{ text }}</view>
  </view>
</template>

<script>
export default {
  name: 'loading-inline',

  props: {
    color: String,
    text: String,
    wrap: {
      type: Boolean,
      default: true
    },
    size: {
      type: Number,
      default: 1
    }
  }
};
</script>

<style lang="scss">
.loading-inline {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;

  &.flex {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-flow: column nowrap;
  }

  &__icon {
    width: auto;
    height: 60rpx;

    & > view {
      display: inline-block;
      vertical-align: middle;
      -webkit-animation: jump-animation 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
      animation: jump-animation 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
      width: 4rpx;
      height: 48rpx;
      margin-right: 8rpx;
    }

    & > view:nth-child(2),
    & > view:nth-child(4) {
      -webkit-animation-delay: -0.25s !important;
      animation-delay: -0.25s !important;
    }

    & > view:nth-child(1),
    & > view:nth-child(5) {
      -webkit-animation-delay: 0s !important;
      animation-delay: 0s !important;
    }

    & > view:last-child {
      margin-right: 0;
    }
  }

  &__text {
    font-size: 26rpx;
    margin-top: 20rpx;
    padding: 0 20rpx;
  }
}
</style>
